<template>
  <article class="news">
    <app-head title="我的消息"></app-head>

    <scroll :data="messageList" action="getMessageList">
      <ul slot="scrollInner" class="news-inner">
          <li class="news-item" v-for="(item, index) in messageList.list" :key="index">
              <div class="message">
                  <h1 class="title">{{item.title}}</h1>
                  <p class="desc" v-html="item.content"></p>
              </div>
              <span class="time">{{dateFormat(item.create_time)}}</span>
          </li>
      </ul>
    </scroll>
  </article>
</template>

<script>
import { mapGetters } from 'vuex'
import Scroll from '@/components/common/Scroll'

export default {
  name: 'log',
  components: {
    Scroll
  },
  data () {
    return {

    }
  },
  computed: {
    ...mapGetters([
      'messageList'
    ])
  },
  methods: {

  },
  created () {
    this.$store.dispatch('getMessageList')
  }
}
</script>

<style scoped="scoped" lang="scss">
  .news {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    overflow-y: scroll;
    background: rgba(248, 248, 248, 1);
    &-inner {
      padding: 0 0.15rem;
      background-color: #ffffff;
    }
    &-item {
      display: flex;
      align-items: center;
      position: relative;
      // height: 0.72rem;
      padding: 0.12rem 0;
      border-bottom: 0.01rem solid #F8F8F8;
      font-size: 0.12rem;
      .message {
      
      }
      .title {
        font-weight: 600;
        font-size: 0.16rem;
        color: #333333;
        margin-bottom: 0.09rem;
      }
      .desc {
        color: #666666;
      }
      .time {
        position: absolute;
        right: 0.15rem;
        top: 0.1rem;
      }
    }
  }

</style>
<style>
  .news-item .desc img{
    width: 100% !important;
  }
</style>
